<template>
	<div class="hello">
		<el-container>
			<el-header>
				<div class="heard_top">
					<div class="top">
						<div class="top_left">杭州天缘网络欢迎您！</div>
						<div class="top_right">
							<el-button @click="gologin()">登录</el-button>
							<img src="../../assets/wenhao.png" alt="" />
							<span>帮助中心</span>
						</div>
					</div>
				</div>
				<div class="heard_bot">
					<div class="bot">
						<div class="top_left">
							<img src="../../assets/ka_pur.png" class="img1" />
							<img src="../../assets/jifenka.png" class="img2" />
						</div>
						<div class="top_right">
							<img src="../../assets/tel.png" alt="" class="img3" />
							<span><b>0571-86538181</b></span>
						</div>
					</div>
				</div>
			</el-header>
			<el-main>
				<div class="problem_box">
					<div class="problem_top">
						<div>网站帮助</div>
					</div>
					<div class="ul_div">
						<el-collapse v-model="activeName" accordion>
							<el-collapse-item name="1">
								<template slot="title">
									<img src="../../assets/problem.png" alt="" />
									平台登录
								</template>
								<div class="transition_box">
									手机充值支持移动、联通、电信、虚拟运营商、物联网卡号码充值。<br />
									批量导入：手机充值、流量充值、Q币、加油卡充值业务都可进行批量充值。<br />
									如何进行批量导入充值？<br />
									在“批量导入”页面下载Excel模板；<br />
									在Excel表格中填写完整的充值信息；<br />
									导入编辑好的Excel文件；<br />
									提交充值，查询订单状态。<br />
									公告：您可实时知晓产品变动、平台更新等信息。<br />
								</div>
							</el-collapse-item>
							<el-collapse-item name="2">
								<template slot="title">
									<img src="../../assets/problem.png" alt="" />
									充值缴费
								</template>
								<div class="transition_box">
									手机充值支持移动、联通、电信、虚拟运营商、物联网卡号码充值。<br />
									批量导入：手机充值、流量充值、Q币、加油卡充值业务都可进行批量充值。<br />
									如何进行批量导入充值？<br />
									在“批量导入”页面下载Excel模板；<br />
									在Excel表格中填写完整的充值信息；<br />
									导入编辑好的Excel文件；<br />
									提交充值，查询订单状态。<br />
									公告：您可实时知晓产品变动、平台更新等信息。<br />
								</div>
							</el-collapse-item>
							<el-collapse-item name="3">
								<template slot="title">
									<img src="../../assets/problem.png" alt="" />
									交易查询
								</template>
								<div class="transition_box">
									手机充值支持移动、联通、电信、虚拟运营商、物联网卡号码充值。<br />
									批量导入：手机充值、流量充值、Q币、加油卡充值业务都可进行批量充值。<br />
									如何进行批量导入充值？<br />
									在“批量导入”页面下载Excel模板；<br />
									在Excel表格中填写完整的充值信息；<br />
									导入编辑好的Excel文件；<br />
									提交充值，查询订单状态。<br />
									公告：您可实时知晓产品变动、平台更新等信息。<br />
								</div>
							</el-collapse-item>
							<el-collapse-item name="4">
								<template slot="title">
									<img src="../../assets/problem.png" alt="" />
									财务管理
								</template>
								<div class="transition_box">
									手机充值支持移动、联通、电信、虚拟运营商、物联网卡号码充值。<br />
									批量导入：手机充值、流量充值、Q币、加油卡充值业务都可进行批量充值。<br />
									如何进行批量导入充值？<br />
									在“批量导入”页面下载Excel模板；<br />
									在Excel表格中填写完整的充值信息；<br />
									导入编辑好的Excel文件；<br />
									提交充值，查询订单状态。<br />
									公告：您可实时知晓产品变动、平台更新等信息。<br />
								</div>
							</el-collapse-item>
							<el-collapse-item name="5">
								<template slot="title">
									<img src="../../assets/problem.png" alt="" />
									安全中心
								</template>
								<div class="transition_box">
									手机充值支持移动、联通、电信、虚拟运营商、物联网卡号码充值。<br />
									批量导入：手机充值、流量充值、Q币、加油卡充值业务都可进行批量充值。<br />
									如何进行批量导入充值？<br />
									在“批量导入”页面下载Excel模板；<br />
									在Excel表格中填写完整的充值信息；<br />
									导入编辑好的Excel文件；<br />
									提交充值，查询订单状态。<br />
									公告：您可实时知晓产品变动、平台更新等信息。<br />
								</div>
							</el-collapse-item>
							<el-collapse-item name="6">
								<template slot="title">
									<img src="../../assets/problem.png" alt="" />
									卡密兑换平台
								</template>
								<div class="transition_box">
									手机充值支持移动、联通、电信、虚拟运营商、物联网卡号码充值。<br />
									批量导入：手机充值、流量充值、Q币、加油卡充值业务都可进行批量充值。<br />
									如何进行批量导入充值？<br />
									在“批量导入”页面下载Excel模板；<br />
									在Excel表格中填写完整的充值信息；<br />
									导入编辑好的Excel文件；<br />
									提交充值，查询订单状态。<br />
									公告：您可实时知晓产品变动、平台更新等信息。<br />
								</div>
							</el-collapse-item>
						</el-collapse>
					</div>
				</div>
			</el-main>
			<el-footer>
				<div class="foot_top">
					<span>关于我们</span>
					<span>|</span>
					<span>公司荣誉</span>
					<span>|</span>
					<span>联系我们</span>
				</div>
				<div class="foot_bot">Copyright © 2015.版权所有</div>
			</el-footer>
		</el-container>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				show: "0",
				activeName: ''
			}
		},
		methods: {
			gologin:function(){
				this.$router.push({
					name: 'accountlogin'
				});
			}
		}
	}
</script>

<style scoped>
	* {
		margin: 0;
		padding: 0;
	}
	.el-header {
		width: 100%;
		height: 135px !important;
		padding: 0;
	}
	.heard_top {
		width: 100%;
		height: 40px;
		background-color: #454545;
		color: white;
	}
	.heard_top .top {
		width: 1200px;
		height: 100%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		line-height: 40px;
		font-size: 14px;
	}
	.heard_top .top img {
		width: 18px;
		height: 18px;
		vertical-align: top;
		margin-top: 11px;
	}
	.heard_bot {
		width: 100%;
		height: 95px;
		background-color: #fafafa;
	}
	.heard_bot .bot {
		width: 1200px;
		height: 100%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		color: #7b5bc7;
		line-height: 95px;
	}
	.top_left .img1 {
		width: 41px;
		vertical-align: top;
		margin-top: 25px;
	}
	.top_left .img2 {
		width: 85px;
		vertical-align: top;
		margin-top: 30px;
	}
	.top_right .img3 {
		width: 25px;
		height: 25px;
		vertical-align: top;
		margin-top: 35px;
	}
	.el-main {
		padding: 0;
		background-color: #fafafa;
	}
	.el-footer {
		width: 100%;
		height: 220px !important;
		padding: 0;
		background-color: #fafafa;
		border-top: 1px solid #e9e9e9;
	}
	.foot_top,.foot_bot {
		font-size: 14px;
		color: #666666;
	}
	.foot_top {
		width: 300px;
		text-align: center;
		display: flex;
		margin: 80px auto 0;
	}
	.foot_top span {
		width: 60px;
	}
	.foot_bot {
		width: 200px;
		text-align: center;
		margin: 0 auto 0;
		margin-top: 36px;
	}
	.problem_box{
		width: 1120px;
		border-radius: 3px;
		background-color: white;
		margin: 0 auto;
		border: 1px solid #e9e9e9;
		margin-bottom: 20px;
	}
	.problem_box .ul_div{
		padding: 0 40px;
	}
	.problem_box .problem_top{
		padding: 0 40px;
		height: 67px;
		border-bottom: 1px solid #e9e9e9;
	}
	.problem_top div{
		width: 100px;
		line-height: 64px;
		font-size: 16px;
		text-align: center;
		border-bottom: 3px solid #7b5bc7;
	}
	.el-button{
		width: 45px;
		height: 25px;
		margin-right: 20px;
	}
	.el-collapse-item__header{
		display: inline-block;
	}
</style>